<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简番茄钟</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="pomodoro-container">
        <div class="mode-selector">
            <button class="mode-btn active" data-mode="pomodoro">专注</button>
            <button class="mode-btn" data-mode="short-break">短休</button>
            <button class="mode-btn" data-mode="long-break">长休</button>
        </div>
        
        <div class="pomodoro-display">
            <div class="time-display" id="time">25:00</div>
            <div class="progress-container">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
            <div class="controls">
                <button id="start-btn" class="apple-button">开始</button>
                <button id="pause-btn" class="apple-button secondary">暂停</button>
                <button id="reset-btn" class="apple-button secondary">重置</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>